<template>
  <div class="content">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="工人名称">
        <el-input v-model="formInline.workName" placeholder="请输入装修公司名称" clearable />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="formInline.phone" placeholder="请输入联系电话" clearable />
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="formInline.auditState" placeholder="请选择审核状态">
          <el-option :label="item.name" :value="item.value" v-for="item in auditStateList" :key="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="danger" @click="delFunc" :disabled="ids.length==0">批量删除</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData.records" :stripe="true" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" fixed="left" />
      <el-table-column type="index" />
      <el-table-column label="工人头像" align="center" min-width="150">
        <template #default="scope">
          <el-avatar :size="50" :src="scope.row.workHeadImgUrl" />
        </template>
      </el-table-column>
      <el-table-column prop="workName" label="工人名称" align="center" min-width="120" />
      <el-table-column prop="phone" label="联系号码" align="center" min-width="120" />
      <el-table-column label="行业分类" align="center" min-width="300">
        <template #default="scope">
          {{workTypeName(scope.row.workType)}}
        </template>
      </el-table-column>
      <el-table-column label="服务区域" align="center" min-width="300">
        <template #default="scope">
          {{scope.row.street}}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="fakeid" label="好评数" align="center" /> -->
      <el-table-column label="审核状态" align="center" min-width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.auditState=='01'">{{auditState_format(scope.row.auditState)}}</el-tag>
          <el-tag type="success" v-else-if="scope.row.auditState=='02'">{{auditState_format(scope.row.auditState)}}</el-tag>
          <el-tag type="danger" v-else>{{auditState_format(scope.row.auditState)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="auditTime" label="审核时间" align="center" min-width="180">
        <template #default="scope">
          {{proxy.$utils.dateTimeFormateFn(scope.row.auditTime,"all")}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" min-width="180">
        <template #default="scope">
          {{proxy.$utils.dateTimeFormateFn(scope.row.createTime,"all")}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="240">
        <template #default="scope">
          <el-button type="primary" text @click="handClick(scope.row,1)">详情</el-button>
          <el-button type="primary" :disabled="scope.row.auditState!='01'" text @click="handClick(scope.row,2)">审核</el-button>
          <el-button type="primary" text @click="handClick(scope.row,3)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <approval ref="approvalCom" @fatherMethods="search" request="workCaseAudit"></approval>

    <el-dialog v-model="dialogVisible" title="案例详情" width="700" :before-close="handleClose">
      <el-descriptions border :column="1" class="descriptions120">
        <el-descriptions-item label="工人头像">
          <el-avatar :size="60" :src="info.workHeadImg" />
        </el-descriptions-item>
        <el-descriptions-item label="工人名称">{{info.workName}}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{info.phone}}</el-descriptions-item>
        <el-descriptions-item label="行业分类">{{workTypeName(info.workType)}}</el-descriptions-item>
        <el-descriptions-item label="营业时间">{{info.openingTime}}</el-descriptions-item>
        <el-descriptions-item label="经营面积" v-if="info.area">{{info.area}} ㎡</el-descriptions-item>
        <el-descriptions-item label="个人规模">{{info.companyScale}}人</el-descriptions-item>
        <el-descriptions-item label="个人地址">{{info.personageAddr}}</el-descriptions-item>
        <el-descriptions-item label="服务区域">{{info.serviceArea}}</el-descriptions-item>
        <el-descriptions-item label="个人简介">{{info.selfIntroduction}}</el-descriptions-item>
        <el-descriptions-item label="奖项照片" v-if="info.awardsImgUrls&&info.awardsImgUrls.length">
          <uploadImage v-model="info.awardsImgUrls" readonly="1"></uploadImage>
        </el-descriptions-item>
        <el-descriptions-item label="门店实景" v-if="info.caseImgUrls&&info.caseImgUrls.length">
          <uploadImage v-model="info.caseImgUrls" readonly="1"></uploadImage>
        </el-descriptions-item>
        <el-descriptions-item label="案例照片" v-if="info.craftImgUrls&&info.craftImgUrls.length">
          <uploadImage v-model="info.craftImgUrls" readonly="1"></uploadImage>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import approval from "@/views/freeLobbyManage/components/approval.vue"; //审批
import { onMounted } from "vue";
const instance = getCurrentInstance();
const { proxy } = getCurrentInstance();

let formInline = ref({
  workName: "",
  phone: "",
  auditState: "",
  pageNum: 1,
  pageSize: 10,
});
let tableData = ref({});
let ids = ref([]);
let auditStateList = ref([
  { name: "待审核", value: "01" },
  { name: "审核通过", value: "02" },
  { name: "审核驳回", value: "03" },
]);
let dialogVisible = ref(false);
let info = ref({});

onMounted(() => {
  search();
});

let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  tableData.value = await proxy.$apis.workCaseList(formInline.value);
};
let init = () => {
  formInline.value = {
    workName: "",
    phone: "",
    auditState: "",
    pageNum: 1,
    pageSize: 10,
  };
  getInfo();
};
let workTypeName = (array) => {
  if (!array) return;
  let list = [];
  for (let index = 0; index < array.length; index++) {
    const element = array[index];
    list.push(element.name);
  }
  return list.toString();
};
let auditState_format = (e) => {
  if (!e) return;
  let name;
  auditStateList.value.forEach((element) => {
    if (element.value == e) name = element.name;
  });
  return name;
};
let handClick = async (row, num) => {
  switch (num) {
    case 1:
      seeDetail(row.workId);
      break;
    case 2:
      proxy.$refs.approvalCom.open(row.workId);
      break;
    case 3:
      ids.value = [row.workId];
      delFunc();
      break;
    default:
      break;
  }
};
let delFunc = async () => {
  let resp = await proxy.$utils.confirmTips(`是否确定删除选中的数据吗?`);
  if (!resp) return;
  for (let index = 0; index < ids.value.length; index++) {
    const element = ids.value[index];
    await proxy.$apis.workCaseDel(element);
  }
  proxy.$utils.showToast("删除成功");
  getInfo();
};
let seeDetail = async (workId) => {
  let data = await proxy.$apis.workCaseSelfDetail({ workId });
  if (data.awardsImgUrls && data.awardsImgUrls.length) {
    data.awardsImgUrls = data.awardsImgUrls.toString();
  }
  if (data.caseImgUrls && data.caseImgUrls.length) {
    data.caseImgUrls = data.caseImgUrls.toString();
  }
  if (data.craftImgUrls && data.craftImgUrls.length) {
    data.craftImgUrls = data.craftImgUrls.toString();
  }
  info.value = data;
  dialogVisible.value = true;
};
let handleClose = () => {
  dialogVisible.value = false;
};
const handleSelectionChange = (val: User[]) => {
  let arr = [];
  for (let index = 0; index < val.length; index++) {
    const element = val[index];
    arr.push(element.workId);
  }
  ids.value = [...arr];
};
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
</style>
